<template>
	<view class="service">
		<view style="position: sticky;left: 0;top: 0;background-color: #F5F5F5;z-index: 999;padding-bottom: 20rpx;">
			<!-- tab栏 -->
			<view class="tab_box flex-r-a-c">
				<view class="tab_item flex-c-c-c" :class="item.id == tabCurrent ? 'active' : ''"
					v-for="(item,index) in tabList" :key="index" :data-tabCurrent="item.id" :data-tabType="item.type"
					@tap="tabChange">
					{{item.name}}
				</view>
			</view>
			<!-- 搜索框 -->
			<view class="search_box">
				<view v-if="isSearchInput" class="inputBox flex-r-c-c"
					style="width: 100%; height: 100%; background-color: #FFFFFF; border-radius: 12rpx;"
					@tap="isSearchInput = false">
					<image src="../../../static/mine/ssfdj.png" style="width: 28rpx; height: 28rpx;" mode="widthFix">
					</image>
					<view
						style="color: #999999; font-size: 24rpx; font-weight: 500; letter-spacing: 8rpx; margin-left: 10rpx;">
						搜索</view>
				</view>
				<u-search v-else v-model="searchInput" :focus="isSearchInput == false ? 'true' : 'false' "
					:show-action="false" placeholder="搜索" shape="square" bg-color="#FFF" height="80"
					@search="page = 1;searchBtn()" @blur="page = 1;searchBtn()"></u-search>
			</view>
		</view>

		<!-- 列表内容 -->
		<view class="list_box flex-r-b-c">
			<!-- <view class="iconfont"></view> -->
			<!-- 服务项目 -->
			<view class="list_fw" v-if="tabType == 2" v-for="(item,index) in shopList" :key="index" :data-id="item.id"
				@tap.stop="goDetails">
				<view class="list_t flex-r-b-c">
					<image :src="url + item.image" style="border-radius: 12rpx;" mode=""></image>
					<view class="list_c flex-c-c-s">
						<view class="name one-line-ellipsis" style="width: 100%;">{{item.name}}</view>
						<view class="introduce one-line-ellipsis" style="width: 100%;">{{item.describe}}</view>

						<view class="list_m flex-r-c-c">
							<view class="money flex-r-s-c">¥<text>{{item.price}}</text></view>
							<view class="moneyH flex-r-s-c" v-if="item.orginal_price != 0">
								原价<text>¥{{item.orginal_price}}</text></view>
						</view>

					</view>
				</view>
				<view class="list_b flex-r-b-e">
					<view class="">可享用{{item.snum}}次</view>
					<image src="../../../static/icon/fwtj.png" @tap.stop="addShopCart" mode="widthFix"
						:data-id="item.id"></image>
				</view>
				<view style="position: relative; width: 100%; height: 72rpx;z-index: 99;" v-if="item.estimate_price != undefined">
					<view
						style="width: 100%; height: 100%; background: linear-gradient(180deg, #FEF9F1 0%, #EABE70 100%); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); border-radius: 0px 0px 6px 6px; font-size: 24rpx; font-weight: 500; opacity: 0.1;">
					</view>
					<image
						style="position: absolute; top: 50%; left: 20rpx; transform: translateY(-50%); width: 36rpx; height: 36rpx; opacity: 1;"
						src="/static/icon/icon-sy@3x.png" mode="widthFix"></image>
					<view
						style="position: absolute; top: 50%; left: 66rpx; transform: translateY(-50%); color: #EEC379; opacity: 1;">
						预计收益{{item.estimate_price}}元</view>
				</view>

			</view>

			<!-- 氧发堂 与 润肤清 -->
			<view class="list_yft" v-if="tabType == 1" v-for="(item,index) in shopList" :key="index" :data-id="item.id"
				@tap.stop="goDetails">
				<image :src="url + item.image" mode=""></image>
				<view class="list_yft_b">
					<view class="name one-line-ellipsis" style="width: 100%;">{{item.name}}</view>
					<view class="list_yft_b_b flex-r-b-c">
						<view class="money_box">
							<view class="present_price">¥<text>{{item.price}}</text></view>
							<!-- <view class="original_price">原价<text>{{item.orginal_price}}</text></view> -->
						</view>
						<image src="../../../static/icon/fwtj.png" @tap.stop="addShopCart" mode="widthFix"
							:data-id="item.id"></image>
					</view>
				</view>
			</view>

			<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">
				{{titleText}}
			</view>
		</view>

		<view class="safe-paddings" style=";width: 750rpx;background-color: #FFF0;"></view>

		<!-- 付款栏 -->
		<view class="cart_box flex-r-b-c">
			<view class="icon" @tap.stop="getCartList(true,false)">
				<!-- <u-icon name="shopping-cart" color="#0F4C3A" size="60"></u-icon> -->
				<image style="width: 60rpx; height: 58rpx;" src="../../../static/icon/shoping.png" mode="widthFix">
				</image>
				<view class="redDot" v-if="shopRedDotNum > 0">{{shopRedDotNum}}</view>
			</view>
			<button class="paymentBtn" v-if=" phone == '' " :open-type=" isUserInfo ? getPhoneNumber : '' "
				@getphonenumber="getPhoneNumber" @tap.stop="isUser">付款</button>
			<view class="paymentBtn" v-else @tap.stop="paymentBtn">付款</view>
		</view>
		<view class="safe-paddings"
			style="position: fixed;bottom: 0;left: 0;z-index: 999;width: 750rpx;background-color: #FFFFFF;"></view>
		<!-- 弹框购物车 -->
		<u-popup v-model="isShow" height="50vh" :closeable="true" :customStyle="{bottom:'114rpx'}" border-radius="14"
			mode="bottom">
			<view style="padding: 30rpx;">
				<view class="name">已选服务</view>
				<scroll-view scroll-y="true" style="height: 50vh; margin-top: 40rpx;padding-bottom: 50rpx;">

					<view class="popup_list flex-r-b-c" v-for="(item,index) in cartList" :key="index">
						<image :src="url + item.image" mode=""></image>
						<view class="popup_list_r">

							<view class="list_r_t flex-r-b-c">
								<view class="name">{{item.name}}</view>
								<view class="time" v-if="item.sminute != null">约{{item.sminute}}分钟</view>
							</view>

							<view class="list_r_b flex-r-b-c">
								<view class="popup_price">¥<text>{{item.price}}</text></view>

								<view class="popup_quantity flex-r-b-c">
									<view class="reduce text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="deleteCart(item.id,item.spe_id,item.num)">-
									</view>
									<input type="number" disabled class="quantity" :value="item.num" />
									<view class="plus text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="addCart(item.id,item.spe_id,item.num)">
										+</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>


		<!-- 多规格弹框 -->
		<u-popup v-model="isDGGShow" height="50vh" :closeable="true" :customStyle="{bottom:'114rpx'}" border-radius="14"
			mode="bottom" @close="DGGPopupDlose">
			<view style="padding: 30rpx;">
				<view class="name">已选服务</view>
				<scroll-view scroll-y="true" style="height: 50vh; margin-top: 40rpx;padding-bottom: 50rpx;">

					<view class="popup_list flex-r-b-c" v-for="(item,index) in DGGList" :key="index">
						<image :src="url + item.image" mode=""></image>
						<view class="popup_list_r">

							<view class="list_r_t flex-r-b-c">
								<view class="name">{{item.name}}</view>
								<view class="time" v-if="item.sminute != null">约{{item.sminute}}分钟</view>
							</view>

							<view class="list_r_b flex-r-b-c">
								<view class="popup_price">¥<text>{{item.price}}</text></view>

								<view class="popup_quantity flex-r-b-c">
									<view class="reduce text" style="box-sizing: border-box; padding: 16rpx;" @tap.stop="DGGdeleteCart(item.goods_id,item.id,item.num)">
										-
									</view>
									<input type="number" disabled class="quantityNum" :value="item.num" />
									<view class="plus text" style="box-sizing: border-box; padding: 16rpx;" @tap.stop="DGGaddCart(item.goods_id,item.id,item.num)">
										+</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.$base.smallimgUrl,
				shopRedDotNum: 0, // 购物车红点提示
				tabCurrent: 1, // tab 下标
				tabType: 2, // 商品的类型 2: 服务商品， 1: 普通商品
				searchInput: '', // 搜索框
				isShow: false, // 购物车弹框显示
				// tab 栏数据
				tabList: [],
				page: 1, // 页码
				shopList: [], // 商品列表
				titleText: '', // 上拉提示
				cartList: [], // 购物车列表
				isSearch: true, // 阻止搜索的多次请求
				phone: '',
				isSearchInput: true,
				isClick: true,
				isUserInfo: !uni.getStorageSync('user_info'),
				isDGGShow: false, // 多规格显示
				DGGList: [], // 多规格数据
			}
		},
		onLoad() {
			// 更改 tabbar 标题
			this.modifyTitle()
			// 获取 tab 数据
			this.getTabData()
		},
		onShow() {
			// 引用tabbar的页面隐藏自带tabbar,不改变四个tabbar的权重
			uni.hideTabBar()
			if (uni.getStorageSync('user_info')) {
				this.getCartList(false, false)
				this.getSingleData('mobile')
			}
		},
		onReachBottom() {
			let that = this
			if (that.titleText == '') { // 防止上拉多次请求
				that.page = that.page + 1
				// that.getServiceShopList()
				that.searchInput == '' ? that.getServiceShopList() : that.searchBtn()
			}
		},
		methods: {
			// 点击付款判读是否登录
			isUser() {
				if (!uni.getStorageSync('user_info')) {
					uni.navigateTo({
						url: '/mine/login/login'
					})
				}
			},
			// 获取手机号
			getSingleData(v) {
				let that = this
				that.$api.getSingle_data({
					name: v
				}).then(res => {
					console.log(res)
					that.phone = res.data.data
				})
			},
			// 更改标题
			modifyTitle() {
				uni.setNavigationBarTitle({
					title: '产品选择'
				})
			},
			getPhoneNumber(e) { // 获取手机号
				let that = this
				var data = {}
				uni.checkSession({
					success(res) {
						console.log(res)
						if (res.errMsg == 'checkSession:ok') {
							data = {
								sessionKey: uni.getStorageSync('user_info').data.sessionKey,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}
							that.$api.getPhone(data).then(res => {
								console.log(res)
								that.phone = res.data
								uni.showToast({
									title: '手机号已获取，请再次点击购买',
									icon: 'none'
								})
							})
						} else {
							uni.login({
								success(res) {
									data = {
										code: res.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv
									}
									that.$api.getPhone(data).then(res => {
										console.log(res)
										that.phone = res.data
										uni.showToast({
											title: '手机号已获取，请再次点击购买',
											icon: 'none'
										})
									})
								}
							})
						}
					}
				})

			},
			// 获取 tab 数据
			getTabData() {
				let that = this
				that.$api.tabData_list().then(res => {
					console.log(res)
					that.tabCurrent = res.data.data[0].id
					that.tabType = res.data.data[0].type
					that.tabList = res.data.data
					// 获取商品列表
					that.getServiceShopList()
				})
			},
			// 获取商品列表
			getServiceShopList() {
				let that = this
				if (that.isClick == false) {
					return
				}
				that.$api.serviceShop_list({
					category_id: that.tabCurrent,
					page: that.page
				}).then(res => {
					console.log(res)
					that.isClick = true
					that.titleText = res.data.data.data.length == 0 ? '已经到底了' : ''
					that.shopList = that.shopList.concat(res.data.data.data)
					that.phone = res.data.data.phone
				})
			},
			// tab 切换
			tabChange(e) {
				this.page = 1
				this.searchInput = ''
				this.shopList = []
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.tabType = e.currentTarget.dataset.tabtype == 2 ? 2 : 1
				this.getServiceShopList()
				this.isClick = false
			},
			// 点击添加购物车
			addShopCart(e) {
				let id = e.currentTarget.dataset.id
				let that = this
				that.$api.getSpe({
					id: id
				}).then(res => {
					console.log(res)
					if (res.data.data.length == 0) {
						this.$api.add_cart({
							id: id
						}).then(res => {
							console.log(res)
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							this.getCartList(false, false)
						})
					} else {
						that.DGGList = res.data.data
						that.isDGGShow = true
					}
				})
			},

			// 多规格弹框关闭
			DGGPopupDlose() {
				let that = this
				that.DGGList.filter(e => {
					e.num = 0
				})
			},

			DGGdeleteCart(goodID, spe_id, num) { // 多规格删除
				let that = this
				let is = null
				that.DGGList.filter(e => {
					if (e.goods_id == goodID && e.id == spe_id) {
						e.num == 0 ? e.num = 0 : e.num--
					}
				})
				num == 1 ? is = true : is = false
				num--
				that.getAdd(true, goodID, spe_id, num, is)
			},

			DGGaddCart(goodID, spe_id, num) { // 多规格添加
				let that = this
				that.DGGList.filter(e => {
					console.log(e)
					if (e.goods_id == goodID && e.id == spe_id) {
						e.num++
					}
				})
				that.getAdd(true, goodID, spe_id)
			},

			// 购物车中的 添加
			addCart(goodID, spe_id, num) {
				console.log(goodID, spe_id, num)
				let that = this
				let isDGG = false
				if (spe_id == undefined) {
					that.cartList.filter(e => {
						if (e.id == goodID) {
							e.num++
						}
					})
				} else {
					that.cartList.filter(e => {
						if (e.id == goodID && e.spe_id == spe_id) {
							e.num++
						}
					})
				}

				that.getAdd(false, goodID, spe_id)
			},
			// 购物车中的 删除
			deleteCart(goodID, spe_id, num) {
				let that = this
				let is = false,
					isDGG = false
				if (spe_id == undefined) {
					that.cartList.filter(e => {
						if (e.id == goodID) {
							e.num == 0 ? e.num = 0 : e.num--
						}
					})
				} else {
					that.cartList.filter(e => {
						if (e.id == goodID && e.spe_id == spe_id) {
							e.num == 0 ? e.num = 0 : e.num--
						}
					})
				}
				num == 1 ? is = true : is = false
				num--
				that.getAdd(false, goodID, spe_id, num, is)
			},
			// 点击获取购物车列表
			getCartList(el, le) {
				let that = this
				that.isShow = el
				that.isDGGShow = le
				that.$api.cart_list().then(res => {
					console.log(res)
					that.cartList = res.data.data
					var num = 0
					res.data.data.map(e => num += e.num)
					that.shopRedDotNum = num
				})
			},
			// 点击跳转详情
			goDetails(e) {
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/order/activityDetails/activityDetails?id=' + id + '&type=1'
				})
			},
			// 点击搜索
			searchBtn() {
				let that = this
				if (that.isSearch) {
					that.isSearch = false // 防止多次请求
					if (that.page <= 1) {
						that.shopList = []
					}
					that.$api.serviceShop_list({
						category_id: that.tabCurrent,
						page: that.page,
						seach: that.searchInput
					}).then(res => {
						console.log(res)
						that.titleText = res.data.data.data.length == 0 ? '已经到底了' : ''
						that.shopList = that.shopList.concat(res.data.data.data)
						that.isSearch = true
						that.isSearchInput = true
					})
				}
			},
			// 点击付款
			paymentBtn() {
				let data = []
				if (this.cartList.length == 0) {
					uni.showToast({
						title: '请先购买商品',
						icon: 'none'
					})
					return
				}
				this.cartList.forEach((e) => {
					console.log(e)
					data.push({
						id: e.id,
						spe_id: e.spe_id,
						num: e.num
					})
				})
				uni.navigateTo({
					url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 添加的方法
			getAdd(isDGG, goodID, id, num, is) {
				console.log(isDGG, goodID, id, num, is)
				this.$api.add_cart({
					id: goodID,
					spe_id: id,
					num: Number(num)
				}).then(res => {
					console.log(res)
					if (num) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					} else if (is) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					} else {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.safe-padding {
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);

	}

	.safe-paddings {
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}

	.service {
		background-color: #F5F5F5;

		.tab_box {
			width: 100vw;
			height: 88rpx;
			background-color: #FFFFFF;

			.tab_item {
				font-size: 34rpx;
				position: relative;
			}

			.active {
				color: #557E6F;
				position: relative;
				height: 88rpx;

				&::after {
					width: 134rpx;
					height: 10rpx;
					content: ' ';
					background-color: #557E6F;
					border-radius: 30rpx;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.search_box {
			width: 90vw;
			height: 80rpx;
			margin: 20rpx auto;
			// margin-top: 40rpx;
		}


		.list_box {
			width: 90vw;
			margin: 20rpx auto;
			padding-bottom: 120rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.list_fw {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 40rpx;
				margin-bottom: 30rpx;

				.list_t {
					image {
						width: 200rpx;
						height: 200rpx;
					}

					.list_c {
						width: 62%;

						.name {
							font-size: 36rpx;
							font-weight: bold;
						}

						.introduce {
							margin-top: 20rpx;
							font-weight: 24rpx;
							color: #777777;
						}

						.list_m {
							margin-top: 20rpx;

							.money {
								color: #FF6C1D;
								font-size: 34rpx;

								text {
									font-size: 41rpx;
								}
							}

							.moneyH {
								margin-left: 20rpx;
								color: #A2A2A2;
								font-size: 20rpx;

								text {
									font-size: 34rpx;
									text-decoration: line-through;
								}
							}
						}

					}
				}

				.list_b {
					margin-top: 10rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.list_yft {
				width: 320rpx;
				height: auto;
				border-radius: 12rpx;
				background-color: #FFF;
				margin-bottom: 20rpx;

				image {
					width: 320rpx;
					height: 320rpx;
					border-radius: 12rpx;
				}

				.list_yft_b {
					box-sizing: border-box;
					padding: 20rpx;

					.name {
						font-size: 30rpx;
						font-weight: 800;
						color: #666666;
					}

					.list_yft_b_b {
						image {
							width: 44rpx;
							height: 34rpx;
						}

						.money_box {
							width: 200rpx;
							display: flex;
							align-items: center;

							.present_price {
								color: #FF6C1D;
								font-size: 20rpx;

								text {
									display: inline;
									font-size: 36rpx;
								}
							}

							.original_price {
								margin-left: 4rpx;
								color: #C3C3C3;
								font-size: 20rpx;

								text {
									display: inline;
									font-size: 28rpx;
									text-decoration: line-through;
								}
							}
						}
					}
				}
			}



		}



		.cart_box {
			width: 100vw;
			height: calc( constant(safe-area-inset-bottom) + 114rpx);
			height: calc( env(safe-area-inset-bottom) + 114rpx);
			box-sizing: border-box;
			padding: 0rpx 40rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			z-index: 99999;

			.icon {
				position: relative;

				.redDot {
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 50%;
					font-size: 20rpx;
					background-color: red;
					color: #FFFFFF;
					position: absolute;
					top: -2rpx;
					right: -8rpx;
				}
			}

			button {
				margin: 0;
			}

			.paymentBtn {
				width: 228rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 42rpx;
				color: #fff;
				font-size: 32rpx;
				letter-spacing: 8rpx;
				background-color: #45806E;
			}
		}


		.popup_list {
			margin-bottom: 30rpx;

			image {
				width: 140rpx;
				height: 140rpx;
			}

			.popup_list_r {
				width: 75%;
				box-sizing: border-box;
				padding-right: 40rpx;

				.list_r_t {
					.name {
						font-size: 36rpx;
						color: #4B4B4B;
						font-weight: 500;
					}

					.time {
						font-size: 22rpx;
						color: #555555;
						font-weight: 300;
					}
				}

				.list_r_b {
					margin-top: 40rpx;

					.popup_price {
						color: #FF6C1D;
						font-size: 32rpx;

						text {
							font-size: 40rpx;
							display: inline-block;
						}
					}

					.popup_quantity {
						.text {
							font-size: 40rpx;
						}

						input {
							width: 100rpx;
							text-align: center;
							background-color: #F2F2F2;
							font-size: 36rpx;
							margin: 0rpx 20rpx;
						}
					}
				}

				// 
			}
		}

	}
</style>
